<!--
	时间：2019-07-31
	描述：线下进度
-->

<template>
	<div class="m-window" v-loading="pageLoading" eletent-loading-text="数据加载中">
		<div class="accept-col">
			<el-row type="flex" justify="center">
				<el-col :span="12" class="steps-col">
					<el-steps :active="activeIndex" finish-status="success" align-center>
						<el-step v-for="(v,i) in steps" :key="i" :title="v"></el-step>
					</el-steps>
				</el-col>
			</el-row>
			<el-row :gutter="8">
				<el-col :span="2">
					<el-button type="primary" @click="backtrack" v-if="!isClose">返回</el-button>
					<el-button type="primary" @click="closetrack" v-if="isClose">关闭</el-button>
				</el-col>
			</el-row>
			<el-row>
				<table :class="['emphasis-table',{'short':isShort},{'long':!isShort}]">
					<tr>
						<th>流程编号</th>
						<td v-html="itemNo" class="hit font-underline"></td>
					</tr>
					<tr>
						<th>融资产品</th>
						<td v-html="finType"></td>
					</tr>
					<tr>
						<th>申请融资金额</th>
						<td v-html="`${applyAmt}元`"></td>
					</tr>
					<tr>
						<th>服务费率</th>
						<td v-html="`${serviceRate}/天`"></td>
					</tr>
					<tr>
						<th>融资月数</th>
						<td v-html="finLMonth"></td>
					</tr>
				</table>
			</el-row>
			<el-row>
				<label>当前进度</label>
				<table class="emphasis-table t-step">
					<tr>
						<th>
							<i :class="`el-icon-${icon}`" style="font-size: 20px;font-weight: 600;color: #000;"></i>
						</th>
						<td v-html="flowName"></td>
					</tr>
				</table>
			</el-row>
			<el-row>
				<table class="emphasis-table">
					<tr>
						<th>申请人</th>
						<td v-html="custUser"></td>
					</tr>
					<tr>
						<th>申请人手机</th>
						<td v-html="custPhone" class="hit"></td>
					</tr>
					<tr>
						<th>金融客服</th>
						<td v-html="applyUser"></td>
					</tr>
					<tr>
						<th>客服电话</th>
						<td v-html="applyPhone" class="hit"></td>
					</tr>
				</table>
			</el-row>
		</div>
	</div>
</template>
<style lang="less" scoped>
.m-window {
	.emphasis-table {
		width: 100%;
		margin-top: 10px;
		&.t-step {
			td {
				width: 98%;
			}
			th {
				width: 2%;
			}
		}
		td,
		th {
			border: 1px solid #eee;
			padding: 10px;
			width: 20%;
		}
		td {
			width: 80%;
		}
		& tr:nth-child(even) th,
		& tr:nth-child(even) td {
			background: #f9fafa;
		}
		.font-underline {
			text-decoration: underline;
		}
		.hit {
			color: #409eff !important;
		}
	}
	.accept-col {
		.steps-col {
			height: 65px;
			margin-top: 30px;
			/deep/.el-steps {
				.el-step {
					.el-step__head {
						.el-step__icon.is-text {
							border-width: 1px;
							.el-step__icon-inner {
								font-size: 12px;
							}
						}
						&.is-success {
							.el-step__line {
								background: #409eff;
							}
						}
						&.is-success,
						&.is-process {
							color: #fff;
							border-color: #409eff;
							.el-step__icon.is-text {
								background: #0c82d7;
								.el-step__icon-inner {
									color: #fff;
									font-weight: 400;
								}
							}
						}
					}
					.el-step__main {
						.el-step__title {
							line-height: 35px;
							&.is-success,
							&.is-process {
								color: #409eff;
							}
						}
					}
				}
				.el-step__title {
					font-size: 14px;
					font-weight: 400;
					color: #666;
				}
			}
		}
	}
	.short {
		tr:nth-child(n + 3):nth-child(-n + 4) {
			td,
			th {
				display: black !important;
			}
		}
		tr:last-child {
			td,
			th {
				display: none !important;
			}
		}
	}
	.long {
		tr:nth-child(n + 4):nth-child(-n + 4) {
			td,
			th {
				display: none !important;
			}
		}
		tr:last-child {
			td,
			th {
				display: black !important;
			}
		}
	}
}
</style>

<script>
import { mapState, mapActions } from 'vuex'
// import ApplyList from '@/views/financeManager/applyList.vue'
import { formatRate, formatPrice } from "@/util/format.js";
export default {
	data () {
		return {
			pageLoading: true,
			flowName: '',
			icon: '',
			itemNo: '',
			finType: '',
			applyAmt: null,
			serviceRate: '',
			finLMonth: '',
			applyUser: '',
			applyPhone: '',
			custUser: '',
			custPhone: '',
			isShort: false,
			activeIndex: 0,
			fromPage: "",
			isClose: false,
			steps: ['联系客服', '线下评审', '提交申请']
		}
	},
	props: {
		removeTab: {
			type: Function,
			default: null
		},
		applyId: String
	},
	computed: {
		...mapState(['supplyChainFinance', 'supplierApplyList']),
	},

	created () {
		this.fromPage = this.supplierApplyList.fromPage;
		if (this.fromPage == "applyList") {//从申请列表跳转
			this.isClose = false
		} else {//从天进宝300万以上及长融确认融资跳转
			this.isClose = true
		}
		this.getApplyActivity()
		this.getApplyInfoDetails()
	},
	methods: {
		...mapActions(['changePageCode']),
		async getApplyActivity () {
			let that = this
			await that.$http.getApplyActivity({ 'applyId': that.applyId }).then(({ data }) => {
				if (data.code == 200) {
					if (data.rows) {
						/*
							 联系客服 --  act_fin_server_accept  -- 客服受理
							 线下评审 --  act_fin_lawyer_accept  -- 法务受理
							 提交申请 --  act_cust_commit  -- 供应商提交申请表
						*/
						if (data.rows.code == 'act_fin_server_accept') {
							that.activeIndex = 0
							that.icon = 'service'
							that.flowName = '请先联系客服'
						} else if (data.rows.code == 'act_fin_lawyer_accept') {
							that.activeIndex = 1
							that.icon = 'document'
							that.flowName = '线下评审'
						} else if (data.rows.code == 'act_cust_commit') {
							that.activeIndex = 2
							that.icon = 'tickets'
							that.flowName = '提交申请'
						} else {
							that.activeIndex = 3
						}
					}
				} else {
					that.$alert("获取申请表流程信息失败", {
						confirmButtonText: "确定",
						customClass: "alertFailure"
					})
				}
			})
				.catch(errror => {
					that.$alert("获取申请表流程信息失败，请检查网络！", {
						confirmButtonText: "确定",
						customClass: "alertFailure"
					})
				})
		},
		async getApplyInfoDetails () {
			let that = this
			await that.$http.getApplyInfoDetails({ id: that.applyId }).then(({ data }) => {
				setTimeout(() => {
					that.pageLoading = false
				}, 500)
				if (data.code == 200) {

					let row = data.rows
					that.itemNo = row.itemNo
					that.finType = row.finType == 1 ? '月有钱' : row.finType == 0 ? '天进宝' : row.finType == 2 ? "金单宝" : "金货宝"
					that.isShort = row.finType == 1 ? false : true
					that.applyAmt = formatPrice(row.applyAmt)
					that.serviceRate = formatRate(row.serviceRate)
					that.finLMonth = `${row.finLMonth}个月`
					that.applyUser = row.applyUser
					that.applyPhone = row.applyPhone
					that.custUser = row.custUser
					that.custPhone = row.custPhone
				} else {
					that.$alert("获取申请表流程信息失败", {
						confirmButtonText: "确定",
						customClass: "alertFailure"
					})
				}
			})
				.catch(errror => {
					that.pageLoading = false
					that.$alert("获取申请表流程信息失败，请检查网络！", {
						confirmButtonText: "确定",
						customClass: "alertFailure"
					})
				})
		},
		backtrack () {
			this.changePageCode('')
		},
		closetrack () {
			this.$tap.$emit('removeTabFn')
		}
	}
}
</script>